<template>
	<view class="app-tabbar-child-nearby">
		<view class="top-header">
			<view class="nearby-header__box">
				<Header :text="addressText" />
				<ClassifyGroup v-if="allClassifyList.length" :allList="allClassifyList" :list="oneClassifyList"
					v-model:value="categoryOne" />
			</view>
			<view class="bg-white">
				<view class="e-flex  tab-view e-font-30">
					<view class="e-flex-1 e-flex e-flex-xy-center" v-for="item in filterList" :key="item.id"
						@tap="hanldeChangeTab(item)">
						<text :class="{'fw-600': showObject[item.type]}"
							:style="{color: showObject[item.type] ? AppSkin.primary : ''}">{{item.name}}</text>
						<text class="arrow-bottom"
							:style="{color: showObject[item.type] ? AppSkin.primary : '#ccc'}"></text>
						<!-- <image :src="$staticPath('black-arrow.png')" class="img-24 e-m-l-10" mode=""></image> -->
					</view>
				</view>
			</view>
		</view>
		<view class="e-p-l-20 e-p-r-20" >
			<nearby-store-item :info="item" v-for="item in storeList" :key="item.id"></nearby-store-item>
				<empty paddingTop="126rpx" :text="$t('nearby.empty')" :icon="$staticPath('default_img.png')"
					v-if="isEmpty"></empty>
					<load-more :showLoad="showLoad" v-else></load-more>
			
		</view>
		
	

		<nearby-store-type :marginTop="`418rpx`" v-model:value="categoryOne" :show="showObject.allShow"
			:oneClassifyList="allClassifyList" :twoClassifyList="twoClassifyList" @close="(e)=>showObject.allShow=!e"
			@change="handleChangeCategory" @select="handleSelectCategory"></nearby-store-type>
		<nearby-store-sort :marginTop="`418rpx`" :show="showObject.sortShow"
			@close="(e:boolean)=>showObject.sortShow=!e" @change="handleChangeSort"></nearby-store-sort>
		<nearby-store-filter :marginTop="`418rpx`" :show="showObject.filtrateShow"
			@close="(e:boolean)=>showObject.filtrateShow=!e" @change="handleChangeFilter"></nearby-store-filter>
	</view>
</template>
<script lang="ts">
	import {
		ref,
		provide,
		reactive,
		computed,
		defineComponent
	} from 'vue'
	import layoutMainPageMixIn from '../../utils/layoutMainPageMixIn'
	import {
		useTabbar
	} from '../../utils/customTabbar'
	import {
		useCurrentInstance,
		useNearby,
		useQueryPage
	} from '@/common/hooks'
	import { userPageContextKey } from '@/token'
	import Header from './child/header.vue'
	import ClassifyGroup from './child/classify-group.vue'
	import { getNearbyStoreList} from '@/common/request/api'

	export default defineComponent({
		mixins: [layoutMainPageMixIn],
		props: {
			index: {
				type: String,
				required: true
			}
		},
		components: {
			Header,
			ClassifyGroup,
		},
		setup(props) {

			const ctx = useCurrentInstance()
			const {
				getLocation,
				showObject,
				filterList,
				allClassifyList,
				oneClassifyList,
				twoClassifyList,
				currentCategory,
				handleSelectCategory,
				hanldeChangeTab,
				sortObj,
				handleChangeSort,
				filterObj,
				handleChangeFilter,
				categoryOne,
				handleChangeCategory,
				 setResetFn} = useNearby()

			const {
				onShow,
				onPullDownRefresh,
				onReachBottom
			} = useTabbar(props.index)

			const requestParams = computed(() => {
				return {
					industry: currentCategory.value.id === -1 ? undefined : currentCategory.value.id,
					...sortObj.value,
					...filterObj.value
				}
			})
			const {
				showLoad,
				isEmpty,
				list: storeList,
				handleQueryPage,
				handleRefresh
			} = useQueryPage({
				api: getNearbyStoreList,
				option: {
					params: requestParams,
					responseKey:"data.rows",
					totalKey:"data.total"
				}
			})
			
			setResetFn(handleRefresh)

			const addressText = ref('')
			const getUserLocation = async (isRefresh ?: boolean) => {
				try {
					const res = await getLocation(isRefresh)
					addressText.value = res.address_component.city
				} catch (e) {
					
				}
				handleRefresh()
			}

			getUserLocation()



			onShow(() => {
				getUserLocation()
			})
			
			onReachBottom(() =>{
				handleQueryPage()
			})


			provide(userPageContextKey, reactive({
				contextId: 'nearby'
			}))

			return {
				addressText,
				getLocation,
				showObject,
				filterList,
				allClassifyList,
				oneClassifyList,
				twoClassifyList,
				currentCategory,
				handleSelectCategory,
				hanldeChangeTab,
				sortObj,
				handleChangeSort,
				filterObj,
				handleChangeFilter,
				categoryOne,
				showLoad,
				isEmpty,
				storeList,
				handleQueryPage,
				handleChangeCategory
			}
		}
	})
</script>

<style lang="scss" scoped>
	
	@include appBem_b(tabbar-child-nearby){
		background: #f7f7f7;
		
		padding-top:418rpx;
		
		.arrow-bottom {
			font-family: "bottomArrowIconfont" !important;
			font-size: 6px;
			font-style: normal;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			color: #ccc;
			margin-left: 14rpx;
		
			&:before {
				content: "\e62a";
			}
		}
		
		.nearby-header__box {
			background: linear-gradient(180deg, #FFFFFF 0%, #F7F7F7 100%);
		}
		
		.tab-view {
			height: 90rpx;
			color: #323232;
		}
		
		.top-header {
			@include fixed-top(10099);
			height: 418rpx;
			background: #f8f8f8;
		}
	}



</style>